<!--编辑商品-->
<template lang="html">
	<div>
		<van-nav-bar title="重新发布"   @click-left="onClickLeft">
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>		  	  
		</van-nav-bar>	
		<div class="wrap">
			<van-field
			    v-model="params.comDesc"
			    label-width='0'
			    size="large"
			    placeholder="标题"
			>
			   <van-icon name="scan" slot="right-icon" color="#000" size="18"/>	
			</van-field>			
			
			
	
			<div style="height: 10px;"></div>

			<van-uploader v-model="fileList"   :max-count="3"
				:after-read="afterRead" :before-delete="deleteImg">
				<img src="../../../../static/img/shangchuan.png" alt="" />
			</van-uploader>				 
			<div class="tips">
				<span>
					<van-icon name="location-o" style="vertical-align: -1px;"/>
					{{params.address}}
				</span>
				
				<div>
                 <van-checkbox v-model="params.brandNew" checked-color="#07c160">全新宝贝</van-checkbox>				
				</div>
			</div>
			
			
			
			

	            			
			<div class="cell">	
	            <van-cell title="数量" 
	                size="large" 
	            	class="borderCell" icon="gold-coin-o"	            	
	            >
	              <div slot="default">
	              	 <van-stepper v-model="params.value" disabled/>

	              </div>
	            </van-cell>
	            <van-cell title="是否不限量发布" 
	                size="large" 
	            	class="borderCell" icon="gold-coin-o"	            	
	            >
	              <div slot="default">
	              	 <van-switch v-model="params.xianliang" active-color="#07c160" size="24px"/>
	              </div>
	            </van-cell>		            
	            <van-cell :title="setPrice" is-link value="编辑价格" 
	            	size="large"  class="borderCell"
	            	@click="showPrice"
	            />
                <div style="padding-top: 10px;color: #999;">{{label}}</div>
	            <van-cell title="分类" is-link  @click="showCategoryPick"
	            	:value="formatMoreInfo(mainMoreInfo)" size="large" 
	            	class="borderCell"           	
	            />     
	            
	            <van-cell title="交易方式"  size="large" class="borderCell">  	            
	               <div slot="default">
	               	   <span class='e' :class="{active:eActive==0}" @click="eActive=0">同城</span>
	               	   <span class='e' :class="{active:eActive==1}" @click="eActive=1">自提</span>
	               	   <span class='e' :class="{active:eActive==2}" @click="eActive=2">邮寄</span>
	               </div>
	            </van-cell>		            
            </div>            
		</div>
		<!--价格弹出层-->
		<floor36 :showPricePopup="showPricePopup" @confirmPricePopup="handlePricePopup"
			@pricePopupCancle="hiddenPricePopup" ref="floor36" :label="label">
		</floor36>
		
		
		<!--发布按钮-->
		<div class="d">
			<div class="d1">
				<van-button color="#ffda44" block class="d2" >确认发布</van-button>
			</div>
		</div>		
		
        <!--分类选择器-->
		<van-popup v-model="showCategory" position="bottom">
		  <van-picker
		  	ref="category"
		    show-toolbar
		    title="请选择分类"
		    :columns="columns"
		    @cancel="showCategory = false"
		    @confirm="changeCategory"
		    value-key="categoryName"
		    :default-index="defaultIndex"
		  >
		  </van-picker>
		</van-popup>		
	</div>

</template>                                                                

<script>	
import Floor36 from '_c/market/floor/floor36.vue'	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'Release',	
	data() {
       return {
       	  eActive:'-1',
 	  	  comId:'',
       	  userId:'',
       	  params:{ 
       	  	  xianliang:false,
       	  	  checked:false,
       	  	  value:1,         // 商品数量         	  	
       	  	  brandNew:0,
       	  	  comId:'',
	       	  goodsIsprice:'', // 是否讲价
	       	  goodsIsnew:'', // 是否全新
	       	  trade_type:'', // 交易方式      
	       	  categoryId:'', //用于绑定 1级分类
	       	  comDesc:'测试品0108',  // 用于绑定商品描述
	       	  comUid:1,   // 用于绑定发布者ID 
	       	  address:'无锡 梁溪区', // 用于绑定发布地址 不可调试 站点必须是 HTTPS
       	      comPrice:'',    // 用于绑定商品售价
       	      comOriginalprice:'', // 用于绑定商品原价
       	      comIspost:false,  // 用于绑定是否包邮
       	      freight:'',    // 用于绑定商品运费	   
       	      goodsImage:'',  // 用于绑定商品图片
       	      money:'0.00'
       	  },
       	  showPricePopup:false, // 用于绑定价格编辑框显示  
       	  setPrice:'价格设置',       	         	  
          showCategory:false,    // 用于绑定是否显示更多信息弹层       	  
       	  mainMoreInfo:'请选择分类',   // 主页面分类的placehold，不记录字段 用于显示 
       	  columns: [], 
       	  defaultIndex:0,
       	  fileList:[],
       	  goodsImage:[],
       	  url1:'/oss/api/v1/market/upload/common', // 用于绑定图片上传地址
       	  url2:this.$api+'/marketorderservice/api/v1/market/updateGoods',       // 编辑发布产品
       	  url3:this.$api+'/marketorderservice/api/v1/market/goods/goodsManagerFee',
       	  url4:this.$api+'/marketorderservice/api/v1/market/goods',   // 用于获取商品信息
       	  url5:this.$api+'/marketorderservice/api/v1/market/category/listVo', // 所有1级分类列表
       	  canRelease:false,   // 用于绑定是否能够发布
       	  isLoading:false,     // 用于绑定发布按钮是否处于加载中
       	  label:''
       	  
       }
	},
	watch:{
        params: {
         handler: function() {         	
         	let goodsImage=this.params.goodsImage
         	let categoryId=this.params.categoryId
         	let comPrice=this.params.comPrice
         	let comDesc=this.params.comDesc
            if(comDesc!=''&&comPrice!=''&&goodsImage!=''&&categoryId!=''){
            	this.canRelease=true
            }else{
            	this.canRelease=false
            }
         },
         deep: true
        }
	},
	components: {
      Floor36
	},	
	methods: {
		// 删除图片
		deleteImg(file,detail){
            let index=detail.index
            // 删除图片
            this.goodsImage.splice(index,1);
            this.fileList.splice(index,1);
		},		
		// 处理确认后的信息
		handleMoreInfo(obj,str){
			this.moreInfo=false
			this.params.goodsIsprice=obj.goodsIsprice
			this.params.goodsIsnew=obj.goodsIsnew
			this.params.trade_type=obj.trade_type
			this.params.categoryId=obj.categoryId			
			if(str!=''){
			  this.mainMoreInfo=str	
			}			
		},
		// 隐藏更多信息弹出层
		hiddenMoreInfo(){
			this.moreInfo=false
		},
		// 显示分类弹层
		showCategoryPick(){
		  	this.showCategory=true
		},	
		// 格式化更多信息
		formatMoreInfo(str){
			if(str.length>=10){
				str=str.substring(0,8)+'...'
			}
			return str
		},	   
	    // 显示价格弹出层
	    showPrice(){
	      	this.showPricePopup=true
	    },	
	    // 隐藏价格弹出层
	    hiddenPricePopup(){
	    	this.showPricePopup=false
	    },
	    // 处理确认价格
	    handlePricePopup(obj,str){
	    	this.showPricePopup=false
	    	if(str){
	    		this.setPrice='￥'+str
	    	}
	    	this.params.comPrice=obj.comPrice
	    	this.params.comOriginalprice=obj.comOriginalprice
	    	this.params.comIspost=obj.comIspost==true?1:0
	    	this.params.freight=obj.freight
	    	this.params.money=obj.money  	
	    },

		// base64转图片
		dataURLtoBlob(dataurl) {		
		    var arr = dataurl.split(','),		
		    mime = arr[0].match(/:(.*?);/)[1],		
		    bstr = atob(arr[1]),		
		    n = bstr.length,		
		    u8arr = new Uint8Array(n);		
		    while (n--) {		
		        u8arr[n] = bstr.charCodeAt(n);		
		    }		
		    return new Blob([u8arr], {		
		        type: mime		
		    });		
		},
		// 保存服务器图片路径
		afterRead(res){	
			let that=this
	        var obj = this.dataURLtoBlob(res.content);
			var fd = new FormData();
			fd.append("file", obj,"image.png");
			this.$jquery.ajax({
			    url: this.url1,
			    type: "POST",
			    processData: false,
			    contentType: false,
			    data: fd,
			    success: function (result) {
			    	that.goodsImage.push(result.data.url)
			    }
			});		
		},
        // 发布
        release(){
	      	this.isLoading=true
	      	if(!this.canRelease){
	      		this.$toast('请输入商品描述、售价、商品图片、分类')
	      		return false      		
	      	}
	      	if(!this.params.comDesc){
	      		this.$toast('请输入商品描述')
	      		return false         		
	      	}
	      	if(!this.params.goodsImage){
	      		this.$toast('请至少上传一张图片')
	      		return false      		
	      	}         
	      	if(!this.params.categoryId){
	      		this.$toast('请选择分类')
	      		return false
	      	}  
	      	if(!this.params.comPrice){
	      		this.$toast('请输入商品价格')
	      		return false
	      	}
	      	this.isLoading=true
	      	let that=this
	      	that.params.goodsImage=this.goodsImage.join(',')
		    that.$Axios.Post(that.url2, that.params)
		    .then(function(res) {
		       that.isLoading=false
	           let arg='[{"id":"'+res.comId+'"}]' 
		   	   // that.link('detail',arg)	
		    })	      	
        }, 
        // 获取分类列表
	    getCategory(){
		  let that=this	
	      this.$Axios.Post(this.url5, {"parentId":0,"counts":0,"status":"0"})
	      .then(function(res) {
	      	that.columns=res.categoryList  
	      })	   	
	    },
	    // 选择分类
        changeCategory(res){
			this.params.categoryId=res.categoryId	
			this.showCategory=false
			this.mainMoreInfo=res.categoryName        	
        },
        // 获取商品信息
        getData(){
        	let that=this
		    this.$Axios.Get(this.url4+'/'+this.comId+'/'+this.userId)
		    .then(function(res) {
		       // console.log(res)	
		       that.params.comDesc=res.data.comDesc;
		       let arr=res.data.goodsImageList
		       for(var i=0;i<arr.length;i++){
		       	 let obj={}
		       	 obj.url=arr[i]
		       	 obj.isImage=true
		       	 that.fileList.push(obj)
		       }
		       that.params.comId=res.data.comId
		       that.params.address=res.data.address 
		       that.params.goodsIsprice=res.data.goodsIsprice
		       that.params.goodsIsnew=res.data.goodsIsnew
		       that.params.trade_type=res.data.tradeType
		       that.params.categoryId=res.data.categoryId
		       that.params.comPrice=res.data.comPrice
		       that.params.comOriginalprice=res.data.comOriginalprice
		       that.params.comIspost=res.data.comIspost?1:0
		       that.params.freight=res.data.freight
		       that.params.comUid=res.data.comUid
               that.params.goodsImage=res.data.goodsImageList.join(',')	
               that.goodsImage=res.data.goodsImageList


		       let freight=res.data.freight.toFixed(2)
		       let comOriginalprice=res.data.comOriginalprice.toFixed(2)
		       let comPrice=res.data.comPrice.toFixed(2)
		       let money=res.data.money.toFixed(2)
		       let comIspost=res.data.comIspost
		       let categoryName=res.data.categoryName
		       let goodsIsprice=res.data.goodsIsprice
		       let goodsIsnew=res.data.goodsIsnew
		       let trade_type=res.data.tradeType
		       that.$refs.floor36.init(freight,comOriginalprice,comPrice,money,comIspost);
		       
		       that.setPrice=`￥${comPrice}`
		       
//		       if(res.data.comIspost>0){
//		       	   that.setPrice=`￥${comPrice} 包邮`
//		       }
//		       
//		       else{
//		       	   that.setPrice=`￥${comPrice}+运费(￥${freight})`
//		       }
		       // that.$refs.floor20.editInit(categoryName,goodsIsprice,goodsIsnew,trade_type);
		       let str1=goodsIsprice==0?'不讲价':'可讲价'
		       let str2=goodsIsnew==0?'半新':'全新'
		       let str3=trade_type==1?'自提':'邮寄'
		       that.mainMoreInfo=categoryName+','+str1+','+str2+','+str3
		    })	        	
        },
        // 获取平台管理费用
        getPlatform(){
	      	let that=this
		    this.$Axios.Get(this.url3+'/1')
		    .then(function(res) {
		       that.label="平台管理费:"+res.data.goodsManagerFee.toFixed(2)+"元(交易成功后从'售价'中扣除)"
		    })	        	
        }        
	},
	mixins:[publicFun],//混入
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;
        this.getData()
        this.getCategory()
        this.getPlatform()
	}
}
</script>

<style scoped> 
.wrap{padding: 20px;background: #fff;}	
.van-nav-bar__title{font-weight: bold;}
.a{height: 46px;width: 70px;display: flex;justify-content: center;align-items: center;}
.release{background: #fef723;border:none;color: #333;}
.cc{display: flex;align-items: center;justify-content: center;}
.imgWrap{height: 100px;background: #f2f2f2;border-radius: 4px;}
.imgWrap>img{width: 100%;height: 100%;border-radius: 4px;}
.tips{color: #848484;margin-top: 20px;display: flex;justify-content: space-between;align-items: center;}
.tips>span{background: #f2f2f2;padding: 4px 12px;border-radius: 10px;}
.cell{margin-top: 30px;}
.van-cell{padding-left: 0;padding-right: 0;}
.borderCell:nth-child(1){border-top:1px solid #f5f6f8}
.borderCell:nth-last-child(1){border-bottom:1px solid #f5f6f8}


.d{position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;padding: 10px;}
.van-button__text{color: #000;font-size: 16px;}
.e{background: #f2f2f2;padding: 8px 10px;margin-right: 4px;}
.e:nth-last-child(1){margin-right: 0;}
.e.active{background: #07c160;color: #fff;}
</style>